<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<script>
    function fun1(){
        var ell=window.document.getElementById("username")
        console.log(ell);
        
    }
    function fun2(){
        var els=document.getElementsByTagName("input")
        for(var i=0;i<els.length;i++){
            console.log(els[i]);
        }
        
    }
    function fun3(){
        var els=document.getElementsByName("aaa")
        for(var i=0;i<els.length;i++){
            console.log(els[i]);
            
        }
        
    }
    function fun4(){
        var els=document.getElementsByClassName("a")
        for(var i=0;i<els.length;i++){
            console.log(els[i]);
            
        }
    }
    function fun5(){
        var div01=document.getElementById("div01")
        var cs=div01.children
        for(var i=0;i<cs.length;i++){
            console.log(cs[i]);
            
        }
        console.log(div01.firstElementChild)
        console.log(div01.lastElementChild)
    }
    function fun6(){
        var pinput=document.getElementById("password")
        console.log(pinput.parentElement);
        
    }
    function fun7(){
        var pinput=document.getElementById("password")
        console.log(pinput.previousElementSibling);
        console.log(pinput.nextElementSibling);
    }
</script>
<body>
    <div id="div01">
        <input type="text" class="a" id="username" name="aaa"/>
        <input type="text" class="b" id="password" name="aaa"/>
        <input type="text" class="a" id="email"/>
        <input type="text" class="b" id="address"/>
    </div>
    <hr>

    <input type="button" value="通过父元素获取子元素" onclick="fun5()" id="btn05"/>
    <input type="button" value="通过子元素获取父元素" onclick="fun6()" id="btn06"/>
    <input type="button" value="通过当前元素获取兄弟元素" onclick="fun7()" id="btn07"/>






    <hr>
    <input type="text" class="a"/><br>
    <input type="button" value="根据id获取指定元素" onclick="fun1()" id="btn01"/>
    <input type="button" value="根据标签名获取多个元素" onclick="fun2()" id="btn02"/>
    <input type="button" value="根据name属性值获取多个元素" onclick="fun3()" id="btn03"/>
    <input type="button" value="根据class属性值获得多个元素" onclick="fun4()" id="btn04"/>

</body>
</html>